<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div')
        console.log(div.getTime);//undefined  自定义属性不能直接通过元素.属性来获取
        console.log(div.getAttribute('getTime'));//20 自定义属性的值必须用getAttribute（'属性名'）获取
        //   H5要求自定义属性必须以date开头为属性名并赋值 其原因是为了避免与元素内置属性引起歧义混淆
        // 例如
        //(1)date-index= '2'//只要以data开头的就一定是自定义的属性
        // (2)我们也可以通过js 用element.setAttribute('属性名',属性值)来设置新的自定义属性 注意设置属性时括号里的属性值不加引号
        div.setAttribute('date-time', 30)
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h新增的获取自定义属性值的方法 它只能获取data开头的属性
        // dataset 是一个集合里面存放了所有以date开头的自定义属性
        console.log(div.dataset);   
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定属性名里有多个—链接的单词 需用驼峰命名法得到
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);


    </script>
</body>

</html>